<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">
        
        <div class="layui-form-item">
            <label class="layui-form-label required">服务LOGO</label>
            <div class="layui-input-block layuimini-upload">
                <input name="image" class="layui-input layui-col-xs6" readonly  placeholder="请上传服务LOGO" value="">
                <div class="layuimini-upload-btn">
                    <span><a class="layui-btn" data-upload="image" data-upload-number="one" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">服务轮播</label>
            <div class="layui-input-block layuimini-upload">
                <input name="logo" class="layui-input layui-col-xs6" lay-verify="required" readonly placeholder="请上传轮播图片" value="">
                <div class="layuimini-upload-btn">
                    <span><a class="layui-btn" data-upload="logo" data-upload-number="more" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
                </div>
            </div>
        </div> 
        <div class="layui-form-item">
            <label class="layui-form-label">商户名称</label>
            <div class="layui-input-block">
                <input type="text" name="merchant_name" class="layui-input"  placeholder="请输入商户名称" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系电话</label>
            <div class="layui-input-block">
                <input type="text" name="phone" class="layui-input"  placeholder="请输入联系电话" value="">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">省</label>
                    <div class="layui-input-block">
                        <select name="province" class="layui-input" lay-filter="province">
                            <option value="0">请选择</option>
                            {volist name="province" id="v"}
                                <option value="{$v.id}" >{$v.name}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
            </div>

            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">市</label>
                    <div class="layui-input-block">
                        <select name="city" class="layui-input" id="city" lay-filter="city">
                            
                        </select>
                    </div>
                </div>
            </div>

            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">区</label>
                    <div class="layui-input-block">
                        <select name="area" class="layui-input" id="area" lay-filter="area">
                            
                        </select>
                    </div>
                </div>
            </div>
        </div>

 
        <div class="layui-form-item">
            <label class="layui-form-label">详细地址</label>
            <div class="layui-input-block">
                <input type="text" name="address" class="layui-input"  placeholder="请输入详细地址" value="">
            </div>
        </div>

        <div class="layui-form-item"> 
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required" >经度:</label>
                    <div class="layui-input-block">
                        <input id="longitude" name="longitude" placeholder="请输入经度" class="layui-input map-location-input" lay-verType="tips" lay-verify="required" required/>
                        <div id="locationBtn" class="layui-icon layui-icon-location map-location"></div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required" >纬度:</label>
                    <div class="layui-input-block">
                        <input id="latitude" name="latitude" placeholder="请输入纬度" class="layui-input" lay-verType="tips" lay-verify="required" required/>
                    </div>
                </div>
            </div>
        </div>  
        
        <div class="layui-form-item">
            <label class="layui-form-label">标签（多个用逗号分割）</label>
            <div class="layui-input-block">
                <input type="text" name="label" class="layui-input"  placeholder="请输入标签（多个用逗号分割）" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">详情</label>
            <div class="layui-input-block">
                <textarea name="desc" rows="20" class="layui-textarea editor" placeholder="请输入详情"></textarea>
            </div>
        </div>
     
        <div class="hr-line"></div>
        <div class="layui-form-item text-center">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
        </div>

    </form>
</div>
<script type="text/javascript">
    layui.use(['form','upload'], function(){
        var form = layui.form;
        var upload = layui.upload;
        $ = layui.$;

        form.on('select(province)', function(data) {
                var majorid = data.value
                $.ajax({
                    url: '{:url("admin/merchant/province")}',
                    type: 'post',
                    data: {
                        id: majorid
                    },
                    dataType: 'json',
                    success: function(data) {
                        $('#city').html(JSON.stringify(data));
                        form.render('select');
                    }
                })
        });

        form.on('select(city)', function(data) {
                var majorid = data.value
                $.ajax({
                    url: '{:url("admin/merchant/city")}',
                    type: 'post',
                    data: {
                        id: majorid
                    },
                    dataType: 'json',
                    success: function(data) {
                        $('#area').html(JSON.stringify(data));
                        form.render('select');
                    }
                })
        });


         //百度地图
        layui.config({
            base : '/static/'
        }).extend({
            locationX: 'location/locationX',
            location: 'location/location',
        }).use(['layer','form','jquery','location'],function(){
            $ = layui.jquery;   
            var form = layui.form;
            var location = layui.location;

            // 自己维护初始化标注。这里给的是天安门   
            var locationData = {lng:108.946465,lat:34.347269};
            
            location.render("#locationBtn",{
                type:1,
                apiType: "baiduMap",
                coordinate: "baiduMap",
                mapType: 3,
                zoom: 15,
                title: '区域定位',
                init: function(){
                    return {longitude: $("#longitude").val()?$("#longitude").val():locationData.lng,latitude: $("#latitude").val()?$("#latitude").val():locationData.lat};
                },
                success: function (data) {
                    $("#longitude").val(data.lng);
                    $("#latitude").val(data.lat);
                }
            });
            
        });
        

    });
</script>